<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      float: left;
      position: relative;
      width: 300px;
      height: 300px;
      margin: 100px 200px;
    }
    .box img {
      width: 200px;
      height: 150px;
    }

    /* 初始位置 */
    .box > * {
      transition: 1s;      /* 过渡效果 设置为1s表示1s内展示出结果 */
      position: absolute;
      left: 0;
      top: 0;
    }

    .box h3 {
      color: deeppink;
      width: 200px;
      transform: translateX(100px) translateY(100px);
    }

    .box p {
      color: white;
    }

    .box p:nth-of-type(1) {
      transform: translateX(-150px) translateY(10px);
    }

    .box p:nth-of-type(2) {
      transform: translateX(-150px) translateY(35px);
    }

    .box p:nth-of-type(3) {
      transform: translateX(-150px) translateY(60px);
    }

    .box:hover p {
      color: hotpink;
    }

    /* 鼠标悬浮到box上的样式 */
    .box:hover p:nth-of-type(1) {
      font-size: 20px;
      transform: translateX(10px) translateY(10px);
    }

    .box:hover p:nth-of-type(2) {
      font-size: 15px;
      transform: translateX(10px) translateY(35px);
    }

    .box:hover p:nth-of-type(3) {
      font-size: 10px;
      transform: translateX(10px) translateY(60px);
    }
  </style>
</head>
<body>

<div class="box">
  <img src="../images/0.jpg">
  <h3>我的简介</h3>
  <p>姓名: 周游</p>
  <p>年龄: 23</p>
  <p>爱好: 敲代码</p>
</div>

</body>
</html>
